<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>

<div id="app">
    <h4 @click="msgfun">{{ msg }}</h4>
    <h5 @click="changefun">{{ change }}</h5>
    <h6 @click="testfun">{{ test }}</h6>
</div>
<!-- 从外部引入进行混用 -->
<script type="text/javascript" src="./js/mixin.js"></script>
<script type="text/javascript">
var mixin = {
    data:{
        change:'I will change , if you click me'
    },
    methods:{
        changefun:function(){
            alert('I am change');
            this.msgfun();
        },
    }
};
var app = new Vue({
    mixins: [mixin,test],
    el:'#app',
    data:{
        msg:'多个挂载点 点我'
    },
    methods:{
        msgfun: function(){
            alert('i am msgfun');
        },
    }
});
</script>




<!-- <h4>最简单的挂载模式</h4>
<div id="myApp">
{{message}}
{{retunDetail()}}
</div>
<h4>JSON挂在模式</h4>
<div id="myAppTwo">
{{message}}
</div> -->
<script type="text/javascript">
// // 第一种：内部 json
// var myApp = new Vue({ // 这个v 还必须是大写
//     el:"#myApp",
//     data:{
//         message:'hello world!'
//     },
//     methods:{
//         retunDetail:function(){
//             return "不错";
//         }
//     }
// });
// var oJson = {el:"#myAppTwo",data:{message:'myAppTwo'}};
// // 第二种：外部 json
// var myAppTwojson = {};
// myAppTwojson.el = "#myAppTwo";
// myAppTwojson.data = {message:'myApptwo'}; 
// var myAppTwo = new Vue(myAppTwojson);
// </script>
</body>
</html>